事件修飾符

Vue 為 v-on 提供了許多事件修飾符，這裡拿出幾個來說明。

.prevent

.prevent 會阻止事件或是瀏覽器的預設行為。舉一個瀏覽器預設行為的例子：

<a href="#" style="margin-top: 1800px; display: block;">menu icon</a>

這個範例的 menu icon 會呈現在最底下，但是當我們點擊的時候，它會直接跑到最上面，並且網址會帶一個 ＃，這是因為瀏覽器會去尋找錨點，但是當我們沒有給予錨點的時候，瀏覽器就會自動將錨點放在最上方，也就是我們所說的「瀏覽器的預設行為」。

.prevent 的阻止預設很常在語法中出現，Vue 也不例外：

<!-- 會阻止點擊後超連結的跳轉 -->
<a href="http://www.baidu.com" @click.prevent="dosomething"/>

<!-- 阻止 submit 送出後跳至其他網址 -->
<form @submit.prevent="dosomething" class="">

.once

點擊事件最多被觸發一次：

<a @click.once="doThis">點擊按鈕</a>

@click 如果沒有使用 .once，只要按一次就會出現一次，就像這樣：

但加了 .once 後 console 會像下面結果，無論你點選幾次都只會觸發一次：

按鍵修飾符

.enter

v-on 也能監聽特定的按鍵，並觸發鍵盤事件：

<!-- 僅在 key 為 enter 時調用 -->
<input @keyup.enter="submit" />

input 在輸入完文字後，直接按下鍵盤 enter，就會觸發並送出表單。

除了 .enter，Vue 也為常用的按鍵提供了方法，譬如：.tab、.delete、.esc、.space、.up、.down、.left、.right 等等。

➔
任務：
操作 這個模板 ( 只能操作 HTML 的部分 )，並依照註解的要求撰寫程式碼。

解答：
CodePen：https://codepen.io/kimberly8/pen/QWmRVdq?editors=1011